<template>
  <div class="intro">
    <DetailSection :title="introductionModule.title">
      <div class="intro-inner">
        <span class="introduction">{{ introductionModule.introduction }}</span>
      </div>
      <div class="icon_ensure">
        <img class="ensureImg" src="@/assets/img/detail/icon_ensure.png" alt="" />
        <img class="icon-bf" src="@/assets/img/detail/icon-bf-i.png" alt="" />   
      </div>
      <div class="bottom">
        <span>旅途永无止境！</span>
        </div>
    </DetailSection>
  </div>
</template>

<script setup>
  import DetailSection from '@/components/detail-section/detail-section.vue'
  defineProps({
    introductionModule: {
      type: Object,
      default: () => ({})
    }
  })
</script>

<style lang="less" scoped>
  .intro {

    .intro-inner {

      .introduction {
        font-size: 12px;
        color: rgb(102, 102, 102);

      }
    }

    .icon_ensure {
      display: flex;
      justify-content:center;
      align-items: center;
      margin-top: 30px;
      height: 100px;
      background-color:#f7f9fb;
      .ensureImg {
        width: 123px;
        height: 17px;
      }
      .icon-bf {
        width: 14px;
        height: 14px;
      }
    }
    .bottom{
      font-size: 12px;
    color: #7688a7;
    text-align: center;
    background-color:#f7f9fb;
      height: 100px;
    }
  }
</style>
